<template>
	<view>
		<view class="p-20">
			<view class="bg-white p-30 border-radius">
				<view class="font-bold">{{info.name}}</view>
				<view class="flex items-center font-24 font-grey mt-10">
					<view class="mr-30">{{info.city}}</view>
					<view class="mr-30">{{info.experience}}</view>
					<view class="mr-30">{{info.education}}</view>
				</view>
				<view class="font-24 font-g font-bold mt-10">{{info.payLow}}-{{info.payHigh}}</view>
			</view>
		</view>
		<view class="pl-20 pr-20 pb-20">
			<view class="bg-white p-30 border-radius flex space-between items-center">
				<view class="flex items-center">
					<image src="../../static/images/avatar.png" mode=""
						style="width: 70rpx;height: 70rpx;border-radius: 50%;"></image>
					<view class=" ml-20">
						<view class="font-24">{{hruser.username}} · {{hruser.job}}</view>
						<view class="font-22 font-grey mt-10">山东合能科技有限公司</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pl-20 pr-20 pb-20">
			<view class="bg-white p-30 border-radius">
				<view class="font-bold">职位介绍</view>
				<view class="mt-20 font-26" style="color: #434343;font-weight: 400;line-height: 52rpx;">
					{{info.info}}
				</view>
			</view>
		</view>
		<!-- <view class="pl-20 pr-20 pb-20">
			<view class="bg-white p-30 border-radius">
				<view class="font-bold">职位福利</view>
				<view class="font-22 flex flex-wrap items-center">
					<view class="pt-10 pb-10 pl-20 pr-20 mr-20 border-radius bg-grey mt-20">年终奖金</view>
					<view class="pt-10 pb-10 pl-20 pr-20 mr-20 border-radius bg-grey mt-20">绩效奖金</view>
					<view class="pt-10 pb-10 pl-20 pr-20 mr-20 border-radius bg-grey mt-20">全勤奖</view>
					<view class="pt-10 pb-10 pl-20 pr-20 mr-20 border-radius bg-grey mt-20">五险一金</view>
					<view class="pt-10 pb-10 pl-20 pr-20 mr-20 border-radius bg-grey mt-20">餐费补贴</view>
				</view>
			</view>
		</view> -->
		<view class="pl-20 pr-20 pb-20">
			<view class="bg-white p-30 border-radius">
				<view class="font-bold">公司信息</view>
				<view class="bg-white mt-20 flex space-between items-center">
					<view class="flex items-center">
						<image v-if="companyInfo.logo" :src="companyInfo.logo" mode="" style="width: 70rpx;height: 70rpx;border-radius: 50%;">
						</image>
						<image v-if="!companyInfo.logo" src="@/static/images/company.png" mode="" style="width: 70rpx;height: 70rpx;border-radius: 50%;">
						</image>
						<view class=" ml-20">
							<view class="font-24">{{companyInfo.name}}</view>
							<view class="font-22 font-grey mt-10">{{companyInfo.companyProfession}} | {{companyInfo.scale}}人
							</view>
						</view>
					</view>
				</view>
				<view class="mt-20 border-radius">
					<map style="width: 100%; height: 300px;" :latitude="companyInfo.latitude"
						:longitude="companyInfo.longitude" :markers="covers">
					</map>
				</view>
			</view>
		</view>

		<view class="bottom-view flex space-around">
			<view class="bottom-btn font-white bg-g" @click="submit">预约面试</view>
			<view class="bottom-btn font-white bg-blue" @click="telphone">拨打电话</view>
		</view>
	</view>
</template>

<script>
	import {
		queryById
	} from '../../api/invite.js';
	import {
		queryById as queryByIdHr
	} from '../../api/hr_user.js';
	import {
		queryById as queryByIdCompany
	} from '../../api/company.js';
	import {
		loadOne
	} from '../../api/common.js';
	import {
		add
	} from '../../api/message.js';
import { getInfo } from '../../api/apply_user.js';
	export default {
		data() {
			return {
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/images/location.png'
				}],
				info: {},
				id: 0,
				hruser: {},
				companyInfo: {},
				companyProfession: {}
			};
		},
		onLoad(options) {
			this.id = options.id
			this.getDetail()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '河口人才招聘小程序',
				path: '/pages/lists/details'
			}
		},
		methods: {
			telphone() {
				uni.makePhoneCall({
					phoneNumber: this.hruser.mobile
				});
			},
			loadCategory(field) {
				loadOne({
					field: 'id',
					val: field
				}).then(res => {
					this.companyProfession = res.result
				})
			},
			getHr(id) {
				queryByIdHr({
					id: id
				}).then(res => {
					this.hruser = res.result
				})
			},
			getCompany(id) {
				queryByIdCompany({
					id: id
				}).then(res => {
					this.companyInfo = res.result
					this.loadCategory(res.result.companyProfession)
					this.covers[0].latitude = res.result.latitude
					this.covers[0].longitude = res.result.longitude
				})
			},
			getDetail() {
				queryById({
					id: this.id
				}).then(res => {
					this.info = res.result
					this.getHr(this.info.hruserId)
					this.getCompany(this.info.companyId)
				})
			},
			submit() {
				const _this = this
				this.$tips.showModal('是否提交预约面试消息？', () => {
					getInfo().then(red => {
						if (red.code === 200) {
							add({
								to_user: this.hruser.appuserId,
								type: 0,
								title: '请求预约面试',
								message: this.info.name+'信息有一条面试请求，点击查看该用户',
								info: red.result.id
							}).then(res => {
								if (res.code === 200) {
									_this.$tips.showConfirmModal('提交成功，请耐心等待回复', () => {})
								} else {
									_this.$tips.showConfirmModal('提交失败，请重试', () => {})
								}
							})
						} else {
							_this.$tips.showConfirmModal('请先填写简历', () => {})
						}
					})
					// _this.$tips.showConfirmModal('提交成功，请等待审核', () => {})
					// add({
					// 	to_user: this.hruser.appuserId,
					// 	type: 0,
					// 	title: '请求预约面试',
					// 	message: this.info.name+'信息有一条面试请求，点击查看该用户',
					// 	info: 'to_user_id'
					// }).then(res => {
					// 	if (res.code === 200) {
					// 		_this.$tips.showConfirmModal('提交成功，请耐心等待回复', () => {})
					// 	} else {
					// 		_this.$tips.showConfirmModal('提交失败，请重试', () => {})
					// 	}
					// })
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
		padding-bottom: 200rpx;
	}

	.bottom-view {
		width: 100vw;
		padding: 40rpx 0;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99999;
		border-top: 1px solid #efefef;

		.bottom-btn {
			width: 45vw;
			margin: auto;
			text-align: center;
			border-radius: 50rpx;
			padding: 20rpx 0;
		}
	}
</style>